page {
    height: 100%;
    background: linear-gradient(to bottom,#04D2C3,#fff);
}
.showGift {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    padding: 6vw 5vw;
    box-sizing: border-box;
    .success {
        position: absolute;
        margin-top: 3vw;
        margin-left: 50%;
        transform: translateX(-80%);
        opacity:0;
        image {
            width: 10vw;
            margin-left: 5vw;
        }
        view {
            color: #fff;
            font-size: 4.8vw;
        }
    }
    .gift {
        position: absolute;
        top: 100vh;
        &.on{
            top:65vw;
            animation: fang_da 0.5s linear 0s 1;
        }
        .light {
            width: 100vw;
            position: absolute;
            top: -45vw;
            left: -5vw;
            z-index: 1;
            transform:scale(0,0);
        }
        .bg {
            width: 90vw;
        }
        .style {
            width: 90vw;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 3;
        }
        .extractBtn {
            width: 25vw;
            position: absolute;
            top: 40vw;
            left: 32.5vw;
            z-index: 4;
        }
        .colorBar {
            width: 70vw;
            position: absolute;
            bottom: 26vw;
            left: 10vw;
            z-index: 2;
            transform:scale(0,0);
            transform-origin: center bottom;
        }
        .goods {
            width: 50vw;
            height: 50vw;
            position: absolute;
            border-radius: 2vw;
            z-index: 1;
            top: 0;
            left: 20vw;
            // transform: translateY(-20vw);
            transition: all 0.5s;
            opacity:0;
        }
    }
    .tip {
        color: #eee;
        font-size: 3.73vw;
        position: absolute;
        bottom: 6vw;
        left: 50%;
        transform: translateX(-50%)
    }
    &.on{
        .gift {
            .light{
                transform:scale(1,1);
                &.on{
                    animation: wait 10s linear 0s infinite;
                }
            }
            .colorBar{
                transform:scale(1,1);
            }
            .goods {
                top:-20vw;
                opacity: 1;
            }
        }
        .success{
            opacity:1;
        }
    }
}
